<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../vue.js"></script>
  <title>ToDoList</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 16px;
      background: #CDCDCD;
    }

    header {
      height: 50px;
      background: #333;
      background: rgba(47, 47, 47, 0.98);
    }

    section {
      margin: 0 auto;
    }

    label {
      float: left;
      width: 100px;
      line-height: 50px;
      color: #DDD;
      font-size: 24px;
      cursor: pointer;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    header input {
      float: right;
      width: 60%;
      height: 24px;
      margin-top: 12px;
      text-indent: 10px;
      border-radius: 5px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
      border: none
    }

    input:focus {
      outline-width: 0
    }

    h2 {
      position: relative;
    }

    span {
      position: absolute;
      top: 2px;
      right: 5px;
      display: inline-block;
      padding: 0 5px;
      height: 20px;
      border-radius: 20px;
      background: #E6E6FA;
      line-height: 22px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }

    ol,
    ul {
      padding: 0;
      list-style: none;
    }

    li input {
      position: absolute;
      top: 2px;
      left: 10px;
      width: 22px;
      height: 22px;
      cursor: pointer;
    }

    p {
      margin: 0;
    }

    li p input {
      top: 3px;
      left: 40px;
      width: 70%;
      height: 20px;
      line-height: 14px;
      text-indent: 5px;
      font-size: 14px;
    }

    li {
      height: 32px;
      line-height: 32px;
      background: #fff;
      position: relative;
      margin-bottom: 10px;
      padding: 0 45px;
      border-radius: 3px;
      border-left: 5px solid #629A9C;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    }

    ol li {
      cursor: move;
    }

    ul li {
      border-left: 5px solid #999;
      opacity: 0.5;
    }

    li a {
      position: absolute;
      top: 2px;
      right: 5px;
      display: inline-block;
      width: 14px;
      height: 12px;
      border-radius: 14px;
      border: 6px double #FFF;
      background: #CCC;
      line-height: 14px;
      text-align: center;
      color: #FFF;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
    }

    footer {
      color: #666;
      font-size: 14px;
      text-align: center;
    }

    footer a {
      color: #666;
      text-decoration: none;
      color: #999;
    }

    @media screen and (max-device-width: 620px) {
      section {
        width: 96%;
        padding: 0 2%;
      }
    }

    @media screen and (min-width: 620px) {
      section {
        width: 600px;
        padding: 0 10px;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <header>
      <section>
        <form action="javascript:void(0)" id="form">
          <label for="title">ToDoList</label>
          <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off"
            v-model="task"
            v-on:keyup.13="handleKeyup"
          />
        </form>
      </section>
    </header>
    <section>
      <h2>正在进行 <span id="todocount"></span></h2>
      <ol class="demo-box">
        <li draggable="true"
          v-for="(task,index) in tasks"
          v-if="!task.isFinished"
        >
          <input type="checkbox"
          v-on:click="handleItemClick(index)"
          >
          <p id="p-2" onclick="">{{task.name}}</p><a href="#">-</a>
        </li>
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul>
        <li draggable="true"
          v-for="(task,index) in tasks"
          v-if="task.isFinished"
        >
          <input type="checkbox" checked="checked"
            v-on:click="handleItemClick(index)"
          >
          <p id="p-0">{{task.name}}</p><a href="#">-</a>
        </li>
      </ul>
    </section>
    <footer>
      Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
    </footer>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        task: '',
        tasks: []
      },
      methods: {
        handleKeyup() {
          this.tasks.push({
            name: this.task,
            isFinished: false
          })
          this.task = ''
        },

        handleItemClick(index) {
          // const currentTask = this.tasks[index]
          // currentTask.isFinished = currentTask.isFinished ? false : true
          this.tasks[index].isFinished = !this.tasks[index].isFinished
        },

        // handleFinishedClick(index) {
        //   this.tasks[index].isFinished = false
        // }
      },
    })
  </script>
</body>

</html>